<template>
  <div class="box">
    <el-card v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中" element-loading-background="rgba(0, 0, 0, 0.8)" class="tree-card">
      <!-- <组件></组件>
      <组件 />  -->
      <!-- 用了一个行列布局 -->
      <TreeTools is-title :data="{name:'传智教育',manager:'负责人'}" @addDept="handleAddDept('')" />
      <!-- 默认el-tree会认为label就是叶子的名字 children是叶子的子代 但是有时候从ajax拿回来的数据没有label, -->
      <!-- 也没有children 所以需要映射关系 -->
      <el-tree :data="depts" :props="{label:'name'}" default-expand-all node-key="id">
        <template #default="{data}">
          <TreeTools :data="data" @delDept="delDeptFn" @addDept="handleAddDept(data.id)" @editDept="handleEditDept(data)" />
        </template>
      </el-tree>
    </el-card>
    <AddDept :pid="pid" :raw-depts="rawDepts" :simple-employee-list="simpleEmployeeList" :dialog-visible="dialogVisible" :title="title" @close="dialogVisible=false" @update="getDepartmentList" />
  </div>
</template>

<script>
// 想复用同一个对话框来既做编辑也做添加
// 我们在平时写项目的时候封装过哪些自定义指令
// 1. v-focus 实现页面一打开input获取焦点
// 2. v-imgerror 项目中有的图片路径加载不出来，来一个默认图片
// 3. v-loading 让ajax有一个加载中效果 体验更好
// 什么时候需要封装组件
// 同样的htmlcssjs写了多次
// 后面要考虑的问题 props 传参数 slot插槽

// function add(){
//   const a = 2
//   const b = 3
//   return a + b
// }
import AddDept from './components/add-dept.vue'
import TreeTools from './components/tree-tools.vue'
import { getDepartmentList, delDepartment, getEmployeeSimple } from '@/api/departments'
import { list2Tree } from '@/utils'
// 性能要更好 因为你把数据放在data中，vue内部要处理它，要数据劫持把它变成响应式的，但是这个数据没有必要，因为
// 模板template中没有用到
export default {
  name: 'DepartmentPage',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      depts: [],
      loading: true,
      dialogVisible: false,
      rawDepts: [],
      pid: '',
      simpleEmployeeList: [],
      form: {},
      title: ''
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    // 找自己的子级 自己.id作为pid 去找
    // 有时候ajax拿回来的数据不能直接直接使用 自己处理一下
    async getDepartmentList() {
      const res = await getDepartmentList()
      this.rawDepts = res.depts// 把未处理的原始列表数据备份一下
      this.depts = list2Tree(res.depts, '')
      this.loading = false
    },
    async delDeptFn(id) {
      try {
        await this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delDepartment(id)
        // 删除成功说明数据变旧了，所以要重新拿一次数据
        this.getDepartmentList()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    fn() {
      console.log(12324545)
    },
    async handleAddDept(id) {
      this.title = '新增部门'
      this.pid = id
      this.simpleEmployeeList = await getEmployeeSimple()
      this.$children[1].form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      this.dialogVisible = true
    },
    async handleEditDept(data) {
      this.title = '编辑部门'
      this.dialogVisible = true
      console.log(this.$children)
      // $parent,$children,$ref对 props,$emit一个补充 父子通信的一个思路  补充写法
      // 因为el-tree上数据不能和表单回写是同一份数据
      this.pid = data.pid// 财务核算部 ，但是我们要找的是财务部 也就是我们把财务核算部的pid传过去
      this.$children[1].form = { ...data }
      this.simpleEmployeeList = await getEmployeeSimple()
    }
  }
}
// 我们写的代码
// function fn({data}){
//   console.log(data);
// }

// fn({a:2,data:3}) <---el-tree 这个是饿了么技术团队写的
// 带有子组件中的数据的插槽
</script>

<style scoped lang='scss'>
.box{
  padding:14px;
}
.tree-card {
  padding: 30px;
  font-size:14px;
  min-height:600px;
}
::v-deep .v-leave-active{
  transition: none !important
}
::v-deep .v-enter-active{
  transition: none !important
}
</style>
